{% extends "base.html" %}
{% load i18n imagequery_tags comments %}

{% block title %}{% blocktrans with name=gallery.name %}Galerie {{ name }} betrachten | fha-django-gallery {% endblocktrans %}{% endblock %}

{% block extrahead %}
    <script type="text/javascript">
        $(document).ready(function() {
            $('#image-slider .image-slides').cycle({
                fx: 'fade',
                speed: 5000,
                prev: '#image-slider .left-arrow',
                next: '#image-slider .right-arrow',
                pause: true
            });
            $('#image-slider .image-slides div').mouseover(function() {
                $(this).find('div.info').show('slow')
            }).mouseout(function() {
                $(this).find('div.info').hide('slow')
            });
            $(function() {
                $('#tabs').tabs();
            });
        });
    </script>
{% endblock %}

{% url gallery_detail slug=gallery.slug as gallery_detail %}

{% block breadcrumbs %}
    {% blocktrans with name=gallery.name %}
        Sie befinden sich hier: <a href="/">fha-django-gallery</a> &raquo; 
        <a href="/galerie/">Galerie</a> &raquo;
        <a href="{{ gallery_detail }}">{{ name }}</a>
    {% endblocktrans %}
{% endblock %}

{% block content %}
    <h2>{% blocktrans with name=gallery.name %}Galerie: {{ name }}{% endblocktrans %}</h2>
    <div id="image-slider">
        <div class="controllers">
            <a class="left-arrow" href="#">prev</a>
            <a class="right-arrow" href="#">next</a>
        </div>
        <div class="image-slides">
            {% for image in gallery.album.all %}
                <div class="image" style="background-image: url({% image_format 'gallery_detail' image.image %});">
                    <span class="image-overlay"></span>
                    <div class="info" style="display: none;">
                        <p>Beschreibung:</p>
                        {% if image.content %}
                            <p>{{ image.content }}</p>
                        {% else %}
                            <p>Keine Bildbeschreibung</p>
                        {% endif %}
                        {% if image.tags %}<p class="tags">{{ image.tags }}</p>{% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="image-shadow-left"></div>
        <div class="image-shadow-right"></div>
    </div>
    <div id="tabs">
        <ul class="tabhead clearfix">
            <li><a href="#tab-1">{% trans "Galerie Details" %}</a></li>
            <li><a href="#tab-2">{% trans "Benutzer Informationen" %}</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab-1">
                <p>{% trans "Kategorie: " %}<strong>{{ gallery.category }}</strong></p>
                <p>{% trans "Beschreibung:" %}</p>
                {% if gallery.content %}
                    <p>{{ gallery.content }}</p>
                {% else %}
                    <p>{% trans "Keine Beschreibung angegeben." %}</p>
                {% endif %}
            </div>
            <div id="tab-2">
                {% if gallery_user.avatar %}
                    <div class="avatar">
                        <img src="{% image_format 'account_avatar' gallery_user.avatar %}" alt="{{ gallery.user.username }}" />
                    </div>
                {% endif %}
                <div class="user-info">
                    <p><strong>{{ gallery.user.username }}</strong></p>
                    <ul>
                        <li><a href="{% url account_show_profile slug=gallery.user.username %}">Profil anzeigen</a></li>
                        {% if admin %}
                            <li><a href="{% url gallery_edit_info slug=gallery.slug %}">Galariedetails bearbeiten</a> | <a href="{% url gallery_edit slug=gallery.slug %}">Bilder bearbeiten</a> | <a href="{% url gallery_add slug=gallery.slug %}">Bilder hinzufügen</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    {% get_comment_count for gallery as comment_count %}
    <h3>Kommentare ({{ comment_count }}):</h3>
    {% get_comment_list for gallery as comment_list %}
    {% for comment in comment_list %}
        <div class="comment">
            <div class="comment-head">
                <h2>{{ comment.user_name }}</h2>
                <p>am {{ comment.submit_date }}</p>
            </div>
            <div class="comment-content">
                <p>{{ comment.comment }}</p>
            </div>
        </div>
    {% endfor %}
    <h3>Kommentar eintragen:</h3>
    {% get_comment_form for gallery as form %}
    <form action="{% comment_form_target %}" method="POST">
        {% csrf_token %}
        {% include "common/forms/display_form.html" %}
        {% with "Kommentieren" as submit_text %}
            {% include "common/forms/display_form_submit.html" %}
        {% endwith %}
    </form>
{% endblock %}
